<template>
  <div class="ek-date-picker">
    <el-date-picker
      v-model="value"
      :type="mode"
      :format="format"
      :value-format="valueFormat"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      @blur="blur"
      @focus="focus"
      @change="change"
      @clear="clear"
      :size="size"
    />
  </div>
</template>

<script setup>
import {
  defineComponent,
  defineEmits,
  onMounted,
  getCurrentInstance,
  computed,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const props = defineProps({
  modelValue: {
    type: [Date, String, Number],
    default: "",
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否显示清除
  clearable: {
    type: Boolean,
    default: true,
  },
  // 默认显示
  placeholder: {
    type: String,
    default: "请选择日期",
  },
  format: {
    type: String,
    default: "YYYY-MM-DD",
  },
  mode: {
    type: String,
    default: "date",
  },
  valueFormat: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: 'default'
  }

});

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const emit = defineEmits(["update:modelValue", "blur", "focus", "change"]);

const value = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    // 点击清空后会返回null, 是否是ele-plus BUG
    emit("update:modelValue", value == null ? "" : value);
  },
});

function blur(event) {
  emit("blur", event);
};
function focus (event) {
  emit("focus", event);
};
function change(event) {
  emit("change", event);
};
function clear() {
  emit("clear");
};
</script>

<style scoped lang="scss"></style>
